<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>初始VUE</title>
    <!-- ctrl + k + c单行注释    这里引入开发的VUE-->
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备一个容器 -->
    <div id="root">
      <!--插值语法，并且可以使用JS表达式-->
      <h1>Hello, {{name.toUpperCase()}}</h1>
      <h1>年龄, {{age}}</h1>
    </div>

    <script type="text/javascript">
      Vue.config.productionTip = false;
    </script>
    <script type="text/javascript">
      //创建Vue实例
      const x = new Vue({
        el: "#root", //element缩写，指定当前实例为哪个容器服务，值通常为CSS选择器字符串。   #为id选择器  .为class选择器
        data: {
          //data中用于存放数据，只针对el所指定的容器使用，值暂时写成一个对象
          name: "尚硅谷gggg",
          age: "20",
        },
      });
    </script>
  </body>
</html>
